<!DOCTYPE html>
        <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>音乐播放器</title>
            <script src="https://cdn.tailwindcss.com"></script>
            <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
            <link href="css/style.css" rel="stylesheet">
            <link href="css/responsive.css" rel="stylesheet">
        </head>
        <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
            <header class="bg-gray-800/80 backdrop-blur-md py-4 px-6 sticky top-0 z-50">
                <div class="container mx-auto">
                    <h1 class="text-2xl font-bold text-center">我的音乐播放器</h1>
                </div>
            </header>

            <main class="flex-grow container mx-auto p-4 md:p-8 flex flex-col md:flex-row gap-8">
                <!-- 播放器主体 -->
                <section class="w-full md:w-1/2 flex flex-col items-center">
                    <div class="relative mb-6">
                        <!-- 封面图 -->
                        <div id="album-container" class="relative w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-gray-700 shadow-xl transition-all duration-300">
                            <img id="album-cover" src="img/default-cover.jpg" alt="音乐封面" class="w-full h-full object-cover">
                            <div id="play-indicator" class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity cursor-pointer">
                                <i class="fa fa-play text-4xl text-white"></i>
                            </div>
                        </div>
                        <!-- 旋转动画效果 -->
                        <style>
                            @keyframes rotate {
                                from { transform: rotate(0deg); }
                                to { transform: rotate(360deg); }
                            }
                            .rotating {
                                animation: rotate 20s linear infinite;
                            }
                            .paused {
                                animation-play-state: paused;
                            }
                        </style>
                    </div>

                    <!-- 歌曲信息 -->
                    <div class="text-center mb-6">
                        <h2 id="song-title" class="text-2xl font-bold mb-2">歌曲标题</h2>
                        <p id="song-artist" class="text-lg text-gray-400">艺术家</p>
                    </div>

                    <!-- 进度条 -->
                    <div class="w-full max-w-md mb-6">
                        <div class="flex items-center gap-2">
                            <span id="current-time" class="text-sm">0:00</span>
                            <div class="flex-grow relative h-1 bg-gray-700 rounded-full cursor-pointer" id="progress-container">
                                <div id="progress-bar" class="absolute left-0 top-0 h-full bg-purple-500 rounded-full" style="width: 0%"></div>
                                <div id="progress-handle" class="absolute left-0 top-1/2 transform -translate-y-1/2 w-3 h-3 bg-white rounded-full shadow-md" style="left: 0%"></div>
                            </div>
                            <span id="total-time" class="text-sm">0:00</span>
                        </div>
                    </div>

                    <!-- 控制按钮 -->
                    <div class="flex items-center justify-center gap-6 mb-8">
                        <button id="shuffle-btn" class="text-gray-400 hover:text-purple-500 transition-colors">
                            <i class="fa fa-random text-xl"></i>
                        </button>
                        <button id="prev-btn" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-step-backward text-2xl"></i>
                        </button>
                        <button id="play-btn" class="w-14 h-14 rounded-full bg-purple-500 flex items-center justify-center text-white shadow-lg hover:bg-purple-600 transition-colors">
                            <i class="fa fa-play text-xl"></i>
                        </button>
                        <button id="next-btn" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-step-forward text-2xl"></i>
                        </button>
                        <button id="repeat-btn" class="text-gray-400 hover:text-purple-500 transition-colors">
                            <i class="fa fa-repeat text-xl"></i>
                        </button>
                    </div>

                    <!-- 音量控制 -->
                    <div class="flex items-center gap-2 mb-8">
                        <i class="fa fa-volume-up text-gray-400"></i>
                        <div class="w-32 relative h-1 bg-gray-700 rounded-full cursor-pointer" id="volume-container">
                            <div id="volume-bar" class="absolute left-0 top-0 h-full bg-gray-400 rounded-full" style="width: 70%"></div>
                            <div id="volume-handle" class="absolute left-0 top-1/2 transform -translate-y-1/2 w-2 h-2 bg-white rounded-full shadow-sm" style="left: 70%"></div>
                        </div>
                        <i class="fa fa-volume-off text-gray-400 ml-2" id="mute-icon"></i>
                    </div>
                </section>

                <!-- 歌词和播放列表切换区域 -->
                <section class="w-full md:w-1/2">
                    <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 shadow-lg h-full">
                        <!-- 切换标签 -->
                        <div class="flex border-b border-gray-700 mb-6">
                            <button id="playlist-tab" class="py-2 px-4 font-medium text-white border-b-2 border-purple-500">播放列表</button>
                            <button id="lyrics-tab" class="py-2 px-4 font-medium text-gray-400 hover:text-white transition-colors">歌词</button>
                        </div>

                        <!-- 播放列表 -->
                        <div id="playlist-container" class="space-y-3 max-h-[400px] overflow-y-auto pr-2">
                            <!-- 播放列表将通过 JavaScript 动态生成 -->
                        </div>

                        <!-- 歌词区域 -->
                        <div id="lyrics-container" class="hidden text-center py-4">
                            <div id="lyrics-content" class="text-lg leading-relaxed text-gray-300">
                                <!-- 歌词将通过 JavaScript 动态生成 -->
                                <p class="text-gray-500">点击封面切换到歌词模式</p>
                            </div>
                        </div>
                    </div>
                </section>
            </main>

            <footer class="bg-gray-800/80 backdrop-blur-md py-4 px-6 text-center text-gray-400 text-sm">
                <p>© 2025 我的音乐播放器 |23215220310 张振国 网络工程三班 设计与开发</p>
            </footer>

            <script src="js/playlist.js"></script>
            <script src="js/playlist-renderer.js"></script>
            <script src="js/audio-player.js"></script>
            <script src="js/main.js"></script>
        </body>
        </html>
    